---
title: Migrando desde Gridsome
description: Consejos para migrar un proyecto existente de Gridsome a Astro
type: migration
stub: true
framework: Gridsome
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Gridsome](https://gridsome.org) es un generador de sitios estáticos de código abierto construido en Vue y GraphQL.

## Principales similitudes entre Gridsome y Astro

Gridsome y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

- Gridsome y Astro son generadores de sitios estáticos modernos en JavaScript con [estructuras de archivos de proyectos similares](/es/basics/project-structure/#carpetas-y-archivos). 

- Gridsome y Astro utilizan una carpeta `src/` para los archivos de tu proyecto y una [carpeta especial `src/pages/` para el enrutamiento basado en archivos](/es/basics/astro-pages/). La creación y gestión de páginas para tu sitio debería resultarte familiar.

- Astro cuenta con [una integración oficial para usar componentes de Vue](/es/guides/integrations-guide/vue/) y admite [la instalación de paquetes NPM](/es/guides/imports/#paquetes-npm), incluyendo varios para Vue. Podrás escribir componentes de UI de Vue y es posible que puedas conservar algunos o todos tus componentes y dependencias de Vue de Gridsome existentes.

- Astro y Gridsome te permiten utilizar un [headless CMS, APIs o archivos Markdown para los datos](/es/guides/data-fetching/). Puedes seguir usando tu sistema preferido de [creación de contenido](/es/guides/content/), y podrás mantener todo tu contenido existente.

## Principales diferencias entre Gridsome y Astro

Cuando reconstruyas tu sitio de Gridsome a Astro, notarás algunas diferencias importantes:

- Gridsome es una aplicación de una sola página (SPA) construida en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando [componentes `.astro`](/es/basics/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/guides/framework-components/) y plantillas de HTML sin procesar.

- Como una SPA, Gridsome utiliza `vue-router` para el enrutamiento SPA, y `vue-meta` para gestionar la etiqueta `<head>`. En Astro, crearás páginas HTML separadas y controlarás la etiqueta `<head>` de cada página directamente, o a través de un [componente de diseño](/es/basics/layouts/).

- [Datos de archivos locales](/es/guides/imports/): Gridsome utiliza GraphQL para recuperar los datos de tu proyecto. Astro usa importaciones ESM y el helper [`Astro.glob()`](/es/guides/imports/#astroglob) para importar los datos de archivos locales del proyecto. Los recursos remotos pueden cargarse utilizando el API estándar `fetch()`. GraphQL se puede añadir opcionalmente a tu proyecto, pero no está incluido por defecto.

## Migrar desde Gridsome a Astro

Para migrar un blog de Gridsome a Astro, empieza con nuestra plantilla inicial para blogs, o explora más temas de la comunidad para blogs en nuestro [catálogo de temas](https://astro.build/themes/).

Puedes pasar el argumento `--template` al comando `create astro` para empezar un nuevo proyecto de Astro con una de nuestras plantillas oficiales. O, puedes [comenzar un nuevo proyecto desde cualquier repositorio de Astro existente en GitHub](/es/install/auto/#plantillas-de-inicio).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Lleva tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para [crear páginas en Markdown o MDX](/es/guides/markdown-content/).

Dado que la estructura del proyecto de Gridsome es similar a la de Astro, es posible que puedas copiar varios archivos existentes de tu proyecto a la misma ubicación en tu nuevo proyecto de Astro. Sin embargo, las dos estructuras de proyectos no son idénticas. Es posible que desees examinar [la estructura del proyecto de Astro](/es/basics/project-structure/) para ver cuáles son las diferencias.

Ya que Astro consulta e importa tus archivos locales de manera diferente a Gridsome, es posible que desees leer acerca de cómo cargar archivos usando [`Astro.glob()`](/es/guides/imports/#astroglob) para entender cómo trabajar con tus archivos locales.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, mira más plantillas oficiales de inicio en [astro.new](https://astro.new). Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un solo clic para abrir un proyecto de trabajo en los entornos de desarrollo en línea de StackBlitz, CodeSandbox y Gitpod.

## Recursos de la comunidad

- Artículo de blog: [Migración de Gridsome a Astro](https://fyodor.io/migration-from-gridsome-to-astro/).
